<template>
  <div class=" " style="padding-left: 15px; padding-right: 15px; padding-top: 4px;">
    <div class="bgImgClass">
    <img class="bgImgTag" src="@/assets/bg.png"/>
    </div>

    <div class="runProjectsDiv"  style="padding: 10px; font-size: 15px;
    font-family: PingFangSC-Thin, 'PingFang SC',sans-serif;color: #000" >
      <div style="display: inline-block;  float: left; width: 25%; color: #545454;">正在直播:</div>
<!--      <marquee style="width: 50%;float: left; text-align: left;" >
      <marquee-item v-for="i in runProjects" :key="i.proId" @click.native="goProjectByID(i.projectId)" >
        {{i.proTitle}}</marquee-item>
      </marquee>-->
      <marquee align="absmiddle" style="width: 50%;float: left; text-align: left;color: #545454;" scrollamount="2"
               @click="goProjectByID(runProjects[0].projectId)" >
        {{runProjects[0].proTitle}}
      </marquee>
      <div @click="goPageRunning"
        style="color: #e62a2a; font-family: PingFangSC-Regular,'PingFang SC', sans-serif;
        font-weight:bold; display: inline-block; float: right;width: 25%;text-align: right;">
        直播列表</div>
    </div>

    <div class="searchDiv" style="margin-top: 30px; margin-bottom: 1px; display: none;" >
      <search :results="sresults"  v-model="searchKey"  ref="searchProjects" style="background:none;">
      </search>
    </div>

    <div class="swiperDiv" style="padding: 10px; margin-top: 28px;" >
      <div style="font-size: 22px; margin-bottom: 10px;
      font-family: PingFangSC-Medium,'PingFang SC', sans-serif;  color:#3e3e3e; ">
        Live+精选</div>
      <swiper :list="swiperImgs" auto style=" " height="140px" dots-position="center"
              @on-index-change="saveSwiperIndex" @click.native="goPorjectBySwiper" >
      </swiper>
    </div>

    <div class="proTypeDiv" style="padding: 10px; text-align: left ;display: none;" >
      <checker v-model="proTypeSelect" default-item-class="demo2-item" selected-item-class="demo2-item-selected">
        <checker-item value="1">会务活动</checker-item>
        <checker-item value="2">会展现场</checker-item>
        <checker-item value="3">娱乐演出</checker-item>
        <checker-item value="4">体育活动</checker-item>
        <checker-item value="5">明星时尚</checker-item>
        <checker-item value="6">旅游跟拍</checker-item>
      </checker>
    </div>

    <div class="historyDiv" style="padding: 10px; padding-bottom: 0px;" >
      <div style=" margin-bottom: 5px;" >
        <div style="font-size: 22px;display: inline-block; font-family: PingFangSC-Medium, 'PingFang SC',sans-serif;color: #3e3e3e;">往期推荐</div>
        <div @click="goPageHistory" style="color: #fff; font-family: PingFangSC-Regular, 'PingFang SC',sans-serif;
        font-size: 15px;
        background-color: #e62a2a;padding: 3px 10px 2px 10px;
        float: right ;display: inline-block;">往期全部</div>
      </div>
    </div>

    <div  v-for="(item, i) in top10" class="oneProjectDiv" style=""  @click="goProjectByID(item.projectId)">
      <div style="display: block; padding: 10px; padding-bottom: 0px; height: 100px;" >
        <div style="display: inline-block; width: 40%; height: 100px; padding:0px; float: left;overflow:hidden" class="" >
          <!--<img :src="item.aPath" style="height:100%; width: 100%; margin: 0px;padding:0px;" />-->
          <div :style="{backgroundImage:'url('+item.aPath+')'}"  class="zoomImage"   ></div>
        </div>

        <div style="display: inline-block;  width: 50% ; padding-left: 15px; padding-top: 0px; position: relative;height: 100px;">
          <div style="margin-bottom: 5px; font-size: 13px;margin-top: 5px;
          font-family: PingFangSC-Medium, 'PingFang SC',sans-serif;color: #424242; font-weight: bold;">
            {{item.proTitle}}</div>

          <div style=" position:absolute; bottom: 5px;">
            <img  v-for="(oneTag , i) in JSON.parse(item.classtype)" class="tag1Class"  :src="tagImgs[oneTag]" />
            <!--<div class="tag1Class" :style="tag1Img" ></div>-->

            <div  style="margin-top: 1px; font-size: 11px; color:#717171;
            font-family: PingFangSC-Regular,'PingFang SC', sans-serif; ">{{item.updateTime.substring( 0 ,10)}}</div>
          </div>
        </div>
      </div>
    </div>

    <div style="height: 20px;"></div>

<!--    <div style="margin-top: 500px; margin-bottom: 20px;">
      <button @click="goPageA">Go View Page</button>
    </div>-->


  </div>
</template>

<script>

import { Marquee, MarqueeItem , Swiper ,Search ,Checker, CheckerItem } from 'vux'

export default {
  components: {   MarqueeItem  ,Swiper  ,Search  , Checker, CheckerItem},
  name: 'ProjectList',
  data () {
    return {
      pid : 1 ,
      baseUrl: process.env.BASE_URL,
      runProjects:[
        { proId: -1 , proTitle:"暂无直播" ,projectId: -1, },
      ],
      top10 : [  ],
      swiperImgs:[

      ],
      swiperIndex : 0,
      proTypeSelect : [],
      sresults :[
/*        {title: 'hello', otherData: 'otherValue' },
        {title: 'hello2', otherData: 'otherValue' },
        {title: 'hello3', otherData: 'otherValue' },*/
      ],
      searchKey : "",
      table : {
        total : 1 ,
        current : 0 ,
        pageSize : 18 ,
        isGetActive : true,
      },
      backgroundDiv: {
        background: 'url(' + require('@/assets/bg.png') + ')'
      },
      tagImgs:{
        0:'',
        1: require('@/assets/tag1.png') ,
        2: require('@/assets/tag2.png'),
        3: require('@/assets/tag3.png') ,
        4: require('@/assets/tag4.png'),
        5: require('@/assets/tag5.png'),
        6: require('@/assets/tag6.png'),
        7: require('@/assets/tag7.png'),
      },
      // tag1Img:{
      //   background: 'url(' + require('@/assets/tag/tag1.png') + ')'  ,
      //   backgroundSize:'cover',
      // },
    }
  },
  methods: {
    goProjectByID( proId ){
      // console.log(  "  proId : " + proId );
      if(proId == -1) {
        return;
      }
      this.$router.push({ name: 'ViewProject', query: { pid: proId , showCover : true }    })
    },
    saveSwiperIndex( arg1  ){
      this.swiperIndex = arg1;
    },
    goPorjectBySwiper(){
      let toPro = this.swiperImgs[ this.swiperIndex ];
      // console.log(  toPro );
      this.goProjectByID( toPro.proId);
    },
    goPageHistory () {
      let vm = this;
      this.$router.push({ name: 'HistoryPros', query: { status: 2 ,proTitle:'-1',classType:"-1"}    })
    },
    goPageRunning () {
      let vm = this;
      this.$router.push({ name: 'HistoryPros', query: { status: 1 ,proTitle:'-1',classType:"-1"}    })
    },

    postCase() {
      let vm = this;
      let path = "guest/test2";
      let params = new FormData();
      params.append("pid", vm.pid );
      vm.$http.post(path, params)
        .then(function (response) {
          console.log(response.data);
          if (response.data.result) {

          } else {
          }
        }).catch(function (error) {
        console.log(error)
      });
    },
    getMainPageInfo() {
      let vm = this;
      let path = "guest/getMainPage";
      vm.$http.get(path, {
          params: {
            "arg1": 'arg1'
          }
        }
      ).then(function (response) {
        if (response.data.result) {
          //runProjects
          let actives = response.data.actives;
          if( actives.length>0 ){
            vm.runProjects = actives;
          }
          //top10
          let top10Pros = response.data.top10;
          for( let tindex in top10Pros){
              let tmp = top10Pros[tindex];
              tmp.aPath =  vm.baseUrl + tmp.coverImg;
          }
          vm.top10 = top10Pros;
          //swiperImgs
          let features = response.data.features;
          let arr = [];
          for( let tindex in features){
            let src = features[tindex];
            let tmpImg = {};
            tmpImg.proId = src.proId;
            tmpImg.fId = src.fId;
            tmpImg.photoId = src.photoId;
            tmpImg.photoPath = vm.baseUrl + src.photoPath;

            tmpImg.title = src.featureDesc;
            tmpImg.url = "javascript:";
            // tmpImg.img = process.env.BASE_URL + src.photoPath2;
            tmpImg.img = process.env.BASE_URL + src.photoPath;

            arr.push(tmpImg);
          }
          vm.swiperImgs = arr;
        }
      });
    },

  },
  created () {

  },
  mounted(){
    this.getMainPageInfo();
  },
}
</script>

<style scoped>
.demo2-item {
  width: 80px;
  height: 40px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
  margin-top: 2px;
}
.demo2-item-selected {
  border-color: green;
}

>>>.weui-search-bar{
  background-color:inherit;
}
>>>.weui-search-bar_focusing{
  background-color:white;
}
>>>.weui-search-bar:before{
  border-top: none;
}
>>>.weui-search-bar:after{
  border-bottom: none;
}
.bgImgClass{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:-1;
}
.bgImgTag{
  height:100%;
  width:100%;
  border:0;
  opacity:0.3;
}
  .tag1Class{
    width: 42px;
    height: 19px;
    margin-right: 5px;
  }

.zoomImage{
  width:100%;
  height:0px;
  padding-bottom: 100%;
  overflow:hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
}

</style>
